<template>
  <div>
    <!-- 学生端 -->
    <div class="flex-box">
      <el-card
        v-for="(item, index) in menu"
        :key="index"
        shadow="always"
        class="box"
        @click.native="goToPage(item.path)"
      >
        <div class="namebox">{{ item.name }}</div>
        <div class="nameDec">{{ item.dec }}</div>

      </el-card>
    </div>
  </div>
</template>

<script>
import headerbox from "../../components/headerbox";
import { localData } from "@/util/local";
export default {
  components: {
    headerbox,
  },
  data() {
    return {
      userRole: "",
      menuInit: [
        //学生
        {
          name: "个人信息",
          dec: "查看和修改自己的个人信息资料，是企业了解你的第一印象",
          path: "/myinfo",
          role: 0,
        },
        {
          name: "我的投递",
          dec: "查看你的历史投递记录，可以查看企业给你的回复",
          path: "/myDeliver",
          role: 0,
        },
        {
          name: "入驻企业",
          dec: "查看入驻平台的企业，以及企业信息",
          path: "/companyCenter",
          role: 0,
        },
        {
          name: "实习市场",
          dec: "查看入驻平台企业发布的实习，以及向企业投递个人资料",
          path: "/jobCenter",
          role: 0,
        },
        //企业
        {
          name: "企业信息",
          dec: "查看和修改企业的信息资料。",
          path: "/companyinfo",
          role: 1,
        },
        {
          name: "发布实习岗位",
          dec: "发布企业的实习岗位，审批后会在实习市场中看到",
          path: "/jobform",
          role: 1,
        },
        {
          name: "我发布的实习",
          dec: "企业发布的实习管理，可对实习进行上架和下架处理",
          path: "/companyjob",
          role: 1,
        },
        {
          name: "我收到的简历",
          dec: "企业收到的简历，可对该投递的学生进行回复",
          path: "/recordcenter",
          role: 1,
        },
        {
          name: "人才市场",
          dec: "查看当前所有登记了资料的学生信息",
          path: "/peocenter",
          role: 1,
        },
        //管理员
        {
          name: "用户账号管理",
          dec: "对所有用户的账号进行管理",
          path: "/userManagement",
          role: 2,
        },
        {
          name: "实习岗位管理",
          dec: "对所有实习岗位进行管理，可进行上架，强制上下架等操作",
          path: "/jobsManagement",
          role: 2,
        },
        {
          name: "投递记录查询",
          dec: "可查询所有学生的投递记录",
          path: "/recordManagement",
          role: 2,
        },
      ],
      menu: [],
    };
  },
  created() {
    this.userRole = localData("get", "userinfo").role;
    this.menu = this.menuInit.filter((item) => item.role === this.userRole);
  },
  methods:{
    goToPage(index) {
      this.$router.push({ path: index });
    }
  }
};
</script>

<style scoped>
.box {
  height: 150px;
  width: 230px;
  margin: 12px;
  border-radius: 8px;
  cursor: pointer;
}
.namebox {
  width: 100%;
  font-size: 20px;
  font-weight: 600;
  color: rgb(65, 151, 46);
}
.nameDec{
  margin-top: 10px;
}
.box:hover {
  border-color: #41972e;
}
.box:hover .namebox {
  color: #41972e;
}
.flex-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>